<template>
    <div class="addressEdit">
        <div class="head">
            <van-nav-bar
            title="地址管理"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            />
        </div>
        <div class="contentbox">
            <div class="addAddress">
               <van-cell>
                   <van-field v-model="userName" placeholder="姓名"  class="ipt"/>
               </van-cell>
               <van-cell>
                  <van-field v-model="telNumber" placeholder="手机号码" class="ipt"/>
               </van-cell>
               <van-cell @click="isSelect=true">
                    <van-field v-model="address" placeholder="省份、城市、区县"   class="ipt"/>
               </van-cell>
               <van-cell >
                   <van-field v-model="detailadress" placeholder="详细地址，如楼道、楼盘号等" class="ipt"/>
               </van-cell>
               <van-cell>
                   <van-checkbox v-model="checked"  shape="square" checked-color="#b4282d">设置为默认地址</van-checkbox>
               </van-cell>
            </div>
        </div>
        <van-overlay v-if="isSelect" :show="isSelect" @click.self="isSelect=false" class="mask">
        <van-area title="" :area-list="areaList" value="110101" class="selection"  @confirm="confirm" @cancel="cancel" />
        </van-overlay>

        <div class="btm" v-else  >
          <div class="save" @click="saveAddress">保存</div>  
          <div class="delete" @click="deleteAddress">删除</div>  
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Dialog, Toast } from 'vant';
import areaList from '@/assets/area'
import {saveAction,AdetailAction,deleteAction} from '@/api/address'
    export default {
        data() {
            return {
                text:'',
                userName:'',
                telNumber:'',
                address:'',
                addressId:'',
                detailadress:'',
                checked:false,
                areaList,
                isSelect:false
            }
        },
         methods: {
            onClickLeft(){
                this.$router.go(-1);
            },
            confirm(value){
                this.address=""
                value.forEach(el => {
                    this.address+=el.name
                });
                this.isSelect=false
            },
            cancel(){
                this.isSelect=false
            },
            saveAddress(){
                var data={};
                if(this.$route.query.id){
                    data = {
                        address:this.address,
                        detailadress:this.detailadress,
                        openId:localStorage.getItem('openId'),
                        telNumber:this.telNumber,
                        userName:this.userName,
                        checked:this.checked,
                        addressId:this.addressId
                    }
                    
                }else{
                     data = {
                        address:this.address,
                        detailadress:this.detailadress,
                        openId:localStorage.getItem('openId'),
                        telNumber:this.telNumber,
                        userName:this.userName,
                        checked:this.checked
                    }

                }
                   
                    if( this.address==""&& this.telNumber=="" && this.userName=="" && this.detailadress==""){  
                        Toast('请正确填写地址');
                    }
                    else{
                        saveAction(data).then(res=>console.log(res))
                        this.$router.go(-1)
                    }
                },
                deleteAddress(){
                    Dialog.confirm({
                        message: '是否要删除商品',
                        beforeClose,
                    });
                    var _this=this;
                    function beforeClose(action, done) {
                            if (action === 'confirm') {
                                deleteAction({
                                id:_this.$route.query.id
                            })
                            .then(res=>{
                                console.log(res)
                            })
                            _this.$router.go(-1)
                                done()
                            } else {
                                done();
                            }
                    }
                }
        },

        created(){
            if(this.$route.query.id){
                 AdetailAction({
                        id:this.$route.query.id
                    })
                    .then(res=>{
                        console.log(res);
                     
                        this.address=res.data.address;
                        this.detailadress=res.data.address_detail;
                        this.checked=res.data.is_default;
                        this.telNumber=res.data.mobile
                        this.userName=res.data.name
                        this.addressId=res.data.id
                    })
            }
        }
        
    }
</script>

<style scoped lang="scss">
.head {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
}
.contentbox {
    margin-top: 50px;
    background-color: #eee;
}

.addAddress{
    width: 100%;
    box-sizing: border-box;
}
.ipt{
    width: 100%;
    // height: 54px;
    padding: 10px 16px;
}
.btm{
    position: fixed;
    bottom: 0;
    width: 100%;
    
    .save{
         height: 50px;
        font-size: 16px;
        color: #fff;
        background-color:#b4282d;
        text-align: center;
        line-height: 50px;
    }
    .delete{
        width: 100%;
        margin-top: 2Px;
        height: 50px;
        font-size: 16px;
        text-align: center;
        line-height: 50px;
        border-top: 1px solid #333;
    }
}


.selection{
    position: fixed;
    width: 100%;
    bottom: 0;

}
.mask{
    z-index: 9;
}
</style>